/* ========================================
Список уроков плашками с картинками
======================================== */


/* ========================================
Снимаем стандартные стили от ГК
======================================== */



.lesson-list li .state-icon-block,
.lesson-list li .user-state-label.is-stop-lesson,
.lesson-list li.divider {
    display: none;
}

.lesson-list li .info {
    margin-left: 0!important;
    border-left: none!important;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 63%;
    flex: 0 1 63%;
}

.lesson-list li .info table {
    min-width: inherit!important;
    width: 100%;
}

.lesson-list li td.item-main-td {
    padding: 0!important;
}



.lesson-list li.first-unreached {
    margin-top: 10px;
}



/*Скрываем системную надпись о дз*/

.user-state-need_accomplish .user-state-label,
.user-state-has_mission .user-state-label,
.lesson-list li .lesson-list__video-watched{
    display:none!important;
}

/*Показываем когда открылся урок*/
.lesson-list li div.user-state-label.has-start-at.lesson-date {
    display: block !important; 
}


/*Убираем цветной фон с уроков*/

.lesson-list li .item-a{
    background:none!important;
}

/* ========================================
Преобразовываем
======================================== */

/* ========================================
Подложка под уроки
======================================== */

.lesson-list {
    font-family: var(--traning-zoloto-font-family-text);
    border-radius: var(--traning-zoloto-border-radius);
    background: var(--traning-zoloto-bg-fon);
    border-top: var(--traning-zoloto-border-top); /* Верхняя обводка */
    border-right: var(--traning-zoloto-border-right); /* Правая обводка */
    border-bottom: var(--traning-zoloto-border-bottom); /* Нижняя обводка */
    border-left: var(--traning-zoloto-border-left); /* Левая обводка*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--traning-zoloto-gap);
    margin-bottom: var(--traning-zoloto-margin-bottom);
    padding: var(--traning-zoloto-padding);
}



/* ========================================
Карточка урока
======================================== */

.lesson-list li {
    background:var(--lesson-zoloto-gorizont-img-bg);
    border-radius: var(--traning-zoloto-border-radius);
    -webkit-box-shadow: var(--traning-zoloto-box-shadow);
    box-shadow: var(--traning-zoloto-box-shadow);
    border: var(--traning-zoloto-color-border);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0px!important;

}


.lesson-list a {
    width: 100%;
    height: 100%;
    position: relative;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    padding: 20px;
    min-height: 135px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: var(--traning-zoloto-font-family-header);
    gap: 20px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}


.lesson-list tr {
    display: flex;
    align-items: center;
}




a.user-state-bg.item-a:focus {
    text-decoration: none!important;
    outline:none!important;
}


.lesson-list li .info {
    width: 100%;
    margin-left: 0!important;
    border-left: none!important;
    background: none!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
}




/* ========================================
Картинка урока
======================================== */

.lesson-list li td.item-image{
    width: 120px!important;
    height: 120px;
    border-radius:var(--traning-zoloto-border-radius);
    flex: 0 0 120px;
}


/* ========================================
Текстовый блок
======================================== */

.lesson-list .item-main-td{
    padding: 0px!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: auto;
}

.lesson-list li .item-main-td .vmiddle {
    padding-right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap:10px;
    width: 100%;
}

@media (min-width: 768px) {

    .lesson-list li.lesson-has-img .item-main-td .vmiddle {
        margin-left: 20px;
    }

    .lesson-list li.lesson-no-img .item-main-td .vmiddle {
        margin-left: 0;
    }

}


/* ========================================
Название урока
======================================== */

.lesson-list li .item-main-td .vmiddle .title {
    font-family: var(--traning-zoloto-font-family-header);
    color: var(--lesson-zoloto-gorizont-img-color-text-3);
    margin-right: 0px!important;
    font-size: 25px;
    line-height: 1;
    font-weight: 400;
    width: 100%;
}


/* ========================================
Описание урока
======================================== */


.lesson-list li .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-img-color-text-2);
    font-family: var(--traning-zoloto-font-family-text);
    font-weight: 300;
    font-size: 18px;
    width: 100%;

}



/* ========================================
Дата открытия урока
======================================== */
.lesson-list li .lesson-date {
    display: block !important;
    color: var(--lesson-zoloto-gorizont-img-color-text-4);
    font-family: var(--traning-zoloto-font-family-header);
    font-weight: 400;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}






/* ========================================
Кнопка в уроке
======================================== */
.lesson-list li a:after {
    content: "Смотреть";
    font-family: var(--traning-zoloto-font-family-header), 'FontAwesome';
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    position: relative;
    text-align: center;
    border-radius: var(--traning-zoloto-border-radius);
    padding: 0px;
    background: var(--lesson-zoloto-gorizont-img-color-status-1);
    color: var(--lesson-zoloto-gorizont-img-color-text-6);
    border: var(--lesson-zoloto-gorizont-img-border-btn);
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    flex: 0 0 20%;
    min-width: 170px;
    min-height: 45px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}



/* ========================================================= 
Цвет кнопки и надпись на ней в зависимости от статуса урока
============================================================  */

/* в уроке есть задание*/

.lesson-list li.user-state-has_mission a::after {
    content: "Есть задание";
    background: var(--lesson-zoloto-gorizont-img-color-status-2);

}

.lesson-list li.user-state-has_mission:before {
    background: var(--lesson-zoloto-gorizont-img-color-status-2);
}



/* стоп урок */

.lesson-list li.user-state-need_accomplish a::after {
    content: "Стоп-урок";
    background: var(--lesson-zoloto-gorizont-img-color-status-5);
}


.lesson-list li.user-state-need_accomplish:before {
    background: var(--lesson-zoloto-gorizont-img-color-status-5);
}


/* урок ожидает проверки */

.lesson-list li.user-state-answered a::after  {
    content: "На проверке";
    background: var(--lesson-zoloto-gorizont-img-color-status-3);
}


.lesson-list li.user-state-answered:before {
    background: var(--lesson-zoloto-gorizont-img-color-status-3);
}


/* урок принят */

.lesson-list li.user-state-accomplished a::after  {
    content: "Принят";
    background: var(--lesson-zoloto-gorizont-img-color-status-4);
}


.lesson-list li.user-state-accomplished:before {
    background: var(--lesson-zoloto-gorizont-img-color-status-4);
}

/* урок просмотрели, без задания */

.lesson-list li.user-state-reached.lesson-list_watched a::after {
    content: "Просмотрено";
    background: var(--lesson-zoloto-gorizont-img-color-status-6);
}


.lesson-list li.user-state-reached.lesson-list_watched:before {
    background: var(--lesson-zoloto-gorizont-img-color-status-6);
}


/* ========================================
Недоступный урок
======================================== */
.lesson-list li.user-state-not_reached {
    background: var(--lesson-zoloto-gorizont-img-bg-no-public);
    -webkit-box-shadow: var(--traning-zoloto-box-shadow-no-public);
    box-shadow: var(--traning-zoloto-box-shadow-no-public);
    border: var(--traning-zoloto-color-border-no-public);

}


.lesson-list li.user-state-not_reached td.item-image{
    filter: opacity(0.5);
}

.lesson-list li.user-state-not_reached .item-main-td .vmiddle .title{
    color: var(--lesson-zoloto-gorizont-img-color-text-3-no-public);
}

.lesson-list li.user-state-not_reached .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-img-color-text-2-no-public);

}

.lesson-list li.user-state-not_reached .lesson-date {
    color: var(--lesson-zoloto-gorizont-img-color-text-4-no-public);
}


/*номер урока*/
.lesson-list li:not(.user-state-not_reached):hover a::before{
    color: var(--lesson-zoloto-gorizont-img-color-text-1-no-public);
}



.lesson-list li.user-state-not_reached  a::after {
    content: "Недоступен \f023 ";
    font-family: var(--traning-zoloto-font-family-header),'FontAwesome';
    background: var(--lesson-zoloto-gorizont-img-color-status-7);
    color: var(--lesson-zoloto-gorizont-img-color-text-6-no-public);
}



.lesson-list li.user-state-not_reached a {
    cursor: default!important;
    filter: opacity(1) grayscale(0);
}



.lesson-list li.user-state-not_reached, .lesson-list li.user-state-not_reached a {
    opacity: 1;
}


/* ========================================
Анимация
======================================== */

/*Карточка урока при наведении*/
.lesson-list li:not(.user-state-not_reached ):hover{
    background:var(--lesson-zoloto-gorizont-img-bg-hover);
    -webkit-box-shadow: var(--traning-zoloto-box-shadow-hover);
    box-shadow: var(--traning-zoloto-box-shadow-hover);
    border: var(--traning-zoloto-color-border-hover);
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

}


.lesson-list li  a.user-state-bg.item-a:focus {
    text-decoration: none!important;
    outline:none!important;
}


/*Название урока*/
.lesson-list li:not(.user-state-not_reached):hover .item-main-td .vmiddle .title {
    color: var(--lesson-zoloto-gorizont-img-color-text-3-hover);
}

/*Описание урока*/
.lesson-list li:not(.user-state-not_reached):hover .item-main-td .vmiddle .description {
    color: var(--lesson-zoloto-gorizont-img-color-text-2-hover);
}

/*Дата открытия урока*/
.lesson-list li:not(.user-state-not_reached):hover .item-main-td .vmiddle .lesson-date{
    color: var(--lesson-zoloto-gorizont-img-color-text-4-hover); 
}


/*Кнопка без статуса*/
.lesson-list li:not(.user-state-not_reached):hover a:after {
    background: var(--lesson-zoloto-gorizont-img-color-status-1-hover);
    color: var(--lesson-zoloto-gorizont-img-color-text-6-hover);
    border: var(--lesson-zoloto-gorizont-img-border-btn-hover);
    filter: contrast(1.2);
    transition: all 0.5s;
}

/* в уроке есть задание*/
.lesson-list li.user-state-has_mission:hover a::after {
    background: var(--lesson-zoloto-gorizont-img-color-status-2-hover);
}

/* стоп урок */
.lesson-list li.user-state-need_accomplish:hover a::after {
    background: var(--lesson-zoloto-gorizont-img-color-status-5-hover);
}

/* урок ожидает проверки */
.lesson-list li.user-state-answered:hover a::after  {
    background: var(--lesson-zoloto-gorizont-img-color-status-3-hover);
}


/* урок принят */
.lesson-list li.user-state-accomplished:hover a::after  {
    background: var(--lesson-zoloto-gorizont-img-color-status-4-hover);
}

/* урок просмотрели, без задания */

.lesson-list li.user-state-reached.lesson-list_watched:hover a::after {
    background: var(--lesson-zoloto-gorizont-img-color-status-6-hover);
}



/* ========================================
Мобильная адаптация
======================================== */


@media (max-width: 991px) {
    .lesson-list {
        width: calc(100% - 10px);
        margin: 0px auto var(--traning-zoloto-margin-bottom) !important;
    }
}




@media (max-width: 767px) {
    .lesson-list {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: var(--traning-zoloto-gap);
        max-width: 400px !important;
    }

    .lesson-list li{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 10px);
        flex: 0 0 calc(100% - 10px);
        margin:0 auto;
        min-height:200px;
        height: auto;      
    }

     .lesson-list li tr{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; 
        -webkit-box-align: start; 
        -ms-flex-align: start; 
        align-items: flex-start;
        width: 100%;
        min-height:100%;
        height:auto;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap:10px;
    }

     .lesson-list li td.item-main-td {
        padding: 0!important;
        width: 100%;
    }

    .lesson-list li table td {
        min-height: 50px;
    }

    .lesson-list li a {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-left: 0px; 
        display: -webkit-box; 
        display: -ms-flexbox; 
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        min-height:200px;
        height: auto;
        gap:10px;
    }

    .lesson-list li a:after{
        margin: 10px auto 0px;
        width: 100%;
    }


     .lesson-list li.first-unreached {
        margin-top: 10px;
    }

    .lesson-list tbody,
    .lesson-list li .info table{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        min-width: inherit!important;
        width: 100%;
        min-height: 100%;
        height: auto;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .lesson-list .item-main-td.item-with-image {
        padding-left: 0px;
        height: auto;
    }


    .lesson-list .item-main-td{
        -webkit-box-pack: flex-start;
        -ms-flex-pack: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
    }



    .lesson-list li .vmiddle {
        margin: 0px;
        width: 100%;
        padding-right: 0;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        text-align: left;
        gap: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }


    .lesson-list li td.item-image {
        position: absolute;
        right: 0px;
        top: 0px;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        width: 70px !important;
        height: 70px !important;
        background-position: center !important;
        background-size: cover !important;

    }

    .lesson-list li.lesson-has-img .vmiddle {
        margin-right: 90px;
    }

    .lesson-list li.lesson-has-img td.item-image {
        position: absolute;
        right: 0;
        top: 0;
        width: 70px !important;
        height: 70px !important;
        display: flex !important;
    }

    /* если картинки нет — td вообще не участвует */
    .lesson-list li:not(.lesson-has-img) td.item-image {
        display: none !important;
    }
}

@media (max-width: 550px) {
    .lesson-list li,
    .lesson-list li a{
        min-height: 200px;
    }

}


@media (max-width: 360px) {
    .lesson-list li.lesson-has-img .vmiddle {
        margin-right: 60px;
    }

    .lesson-list li td.item-image {
        width: 50px !important;
        height: 50px !important;
    }

}



@media (max-width: 425px) {
    .lesson-list {
        max-width: 100%;
        width: calc(100% - 0px);
        margin: 0 auto 20px;
    }
}